<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>后台用户管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 头部按钮区域 -->
    <el-card>
      <el-row :gutter="100">
        <el-col :span="2"
          ><el-button
            class="button-a-size"
            type="warning"
            size="medium"
            @click="ban()"
            >禁用</el-button
          ></el-col
        >
        <el-col :span="2"
          ><el-button
            class="button-a-size"
            type="success"
            size="medium"
            @click="pass()"
            >启用</el-button
          ></el-col
        >
        <el-col :span="2"
          ><el-button
            class="button-a-size"
            type="danger"
            size="medium"
            @click="deleteAdmins()"
            >删除</el-button
          ></el-col
        >
        <el-col :span="2"
          ><el-button
            class="button-a-size"
            type="primary"
            size="medium"
            @click="gotoAdd()"
            >添加新用户</el-button
          ></el-col
        >

        <el-col :span="8" :offset="8">
          <el-input
            placeholder="输入手机号或用户名搜索"
            clearable
            v-model="idOrPhone"
            @click="query()"
            @clear="getAdminList()"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="query()"
            ></el-button>
          </el-input>
        </el-col>
      </el-row>

      <!-- 表格区域 -->
      <el-table
        style="width: 100%"
        :data="adminList"
        border
        stripe
        @selection-change="selectIds"
      >
        <el-table-column
          type="selection"
          width="55"
          prop="id"
        ></el-table-column>
        <el-table-column prop="id" label="ID" sortable> </el-table-column>
        <el-table-column prop="name" label="用户名"> </el-table-column>
        <el-table-column prop="phone" label="手机号"> </el-table-column>
        <el-table-column prop="createTime" label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.createTime | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column prop="roleName" label="角色"></el-table-column>
        <el-table-column prop="status" label="状态" sortable>
          <template slot-scope="scope">
            <div v-if="scope.row.status === 1">
              <p><b style="color: blue; font-size: 15px">·</b> 正常</p>
            </div>
            <div v-if="scope.row.status === 0">
              <p><b style="color: red; font-size: 15px">·</b> 禁用</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <div v-if="scope.row.id !== 1">
              <el-button
                v-if="scope.row.status === 1"
                type="warning"
                size="mini"
                @click="banOne(scope.row.id)"
                >禁用</el-button
              >
              <el-button
                v-if="scope.row.status === 0"
                type="success"
                size="mini"
                @click="passOne(scope.row.id)"
                >启用</el-button
              >
              <el-button
                type="primary"
                size="mini"
                @click="gotoEdit(scope.row.id)"
                ><i class="el-icon-edit"></i
              ></el-button>

              <el-button
                type="danger"
                size="mini"
                @click="deleteOne(scope.row.id)"
                ><i class="el-icon-delete"></i
              ></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="queryInfo.pageSize"
        :current-page="queryInfo.currentPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
const qs = require('qs')
export default {
  data() {
    return {
      // 查询信息
      queryInfo: {
        currentPage: 1,
        pageSize: 10,
      },
      // 用户列表
      adminList: [],
      // 数目
      total: 0,
      // 表格选中的ID列表
      multipleSelection: [],
      // 搜索条件
      idOrPhone: null,
    }
  },
  methods: {
    // 获取管理员列表
    async getAdminList() {
      const { data: res } = await this.$http.get('admin/list', {
        params: this.queryInfo,
      })
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.adminList = res.data.data
      this.total = res.data.total
      console.log(res.data)
    },
    // 单页数目切换
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize
      this.getAdminList()
    },
    // 页码切换
    handleCurrentChange(newPage) {
      this.queryInfo.currentPage = newPage
      this.getAdminList()
    },
    // 禁用账户
    async ban() {
      var ids = []
      for (var i = 0; i < this.multipleSelection.length; i++) {
        ids.push(this.multipleSelection[i].id)
      }
      const { data: res } = await this.$http.get('admin/ban/', {
        params: {
          param: ids,
        },
        paramsSerializer: function (params) {
          return qs.stringify(params, { arrayFormat: 'repeat' })
        },
      })
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      if (res.data > 0)
        return this.$message.info('请求失败' + res.data + '条数据')
      else this.$message.success('操作成功')
      this.getAdminList()
    },
    // 启用账户
    async pass() {
      var ids = []
      for (var i = 0; i < this.multipleSelection.length; i++) {
        ids.push(this.multipleSelection[i].id)
      }
      const { data: res } = await this.$http.get('admin/pass/', {
        params: {
          param: ids,
        },
        paramsSerializer: function (params) {
          return qs.stringify(params, { arrayFormat: 'repeat' })
        },
      })
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      if (res.data > 0)
        return this.$message.info('请求失败' + res.data + '条数据')
      else this.$message.success('操作成功')
      this.getAdminList()
    },
    // 表格选中
    selectIds(val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
    // ban单个
    async banOne(id) {
      var ids = []
      ids.push(id)
      const { data: res } = await this.$http.get('admin/ban/', {
        params: {
          param: ids,
        },
        paramsSerializer: function (params) {
          return qs.stringify(params, { arrayFormat: 'repeat' })
        },
      })
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      if (res.data > 0)
        return this.$message.info('请求失败' + res.data + '条数据')
      else this.$message.success('操作成功')
      this.getAdminList()
    },
    // pass单个
    async passOne(id) {
      var ids = []
      ids.push(id)
      const { data: res } = await this.$http.get('admin/pass/', {
        params: {
          param: ids,
        },
        paramsSerializer: function (params) {
          return qs.stringify(params, { arrayFormat: 'repeat' })
        },
      })
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      if (res.data > 0)
        return this.$message.info('请求失败' + res.data + '条数据')
      else this.$message.success('操作成功')
      this.getAdminList()
    },
    // 批量删除
    async deleteAdmins() {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该用户, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).catch((error) => error)

      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      var ids = []
      for (var i = 0; i < this.multipleSelection.length; i++) {
        ids.push(this.multipleSelection[i].id)
      }
      const { data: res } = await this.$http.get('admin/deletes/', {
        params: {
          param: ids,
        },
        paramsSerializer: function (params) {
          return qs.stringify(params, { arrayFormat: 'repeat' })
        },
      })
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      if (res.data > 0)
        return this.$message.info('请求失败' + res.data + '条数据')
      else this.$message.success('操作成功')
      this.getAdminList()
    },
    // 单个删除
    async deleteOne(id) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该用户, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).catch((error) => error)

      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      var ids = []
      ids.push(id)
      const { data: res } = await this.$http.get('admin/deletes/', {
        params: {
          param: ids,
        },
        paramsSerializer: function (params) {
          return qs.stringify(params, { arrayFormat: 'repeat' })
        },
      })
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      if (res.data > 0)
        return this.$message.info('请求失败' + res.data + '条数据')
      else this.$message.success('操作成功')
      this.getAdminList()
    },
    // 通过账户或者手机号查询
    async query() {
      const { data: res } = await this.$http.get(
        '/admin/query/' + this.idOrPhone
      )
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      console.log(res)
      this.adminList = []
      if (res.data.data !== null) {
        this.adminList.push(res.data.data)
        this.total = res.data.total
      }
      this.total = res.data.total
    },
    // 跳转添加用户
    gotoAdd() {
      this.$router.push({
        path: 'add',
      })
    },
    // 跳转修改信息界面
    gotoEdit(id) {
      this.$router.push({
        path: 'admininfo',
        query: {
          name: 'id',
          code: id,
        },
      })
    },
  },
  created() {
    this.getAdminList()
  },
}
</script>

<style lang="less" scope>
.button-a-size {
  width: 105px;
}
</style>